<template>
  <view class="container">
    <!-- 头部信息 -->
    <view class="flex items-center mb-8">
      <view class="avatar-container">
        <image src="https://picsum.photos/100/100" mode="aspectFill" class="rounded-full avatar-image"></image>
        <!--        <text class="text-gray-600 text-xs">头像大小: 80x80</text>-->
      </view>
      <text class="text-2xl font-bold name-text">姓名</text>
    </view>
    <view class="text-center text-orange-500 mb-8">
      引荐更多用户,获得更多佣金
    </view>
    <u-line color="blue" border-style="dashed"/>


    <view class="text-center text-orange-500 mb-8" style="padding-top: 20px">
      二维码邀请
    </view>
    <!-- 二维码区域 -->
    <view class="flex justify-center relative">
      <view class="qrimg-i">
        <!-- 这里保留原有的二维码组件 -->
        <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit"
                    :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
                    :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
      </view>
    </view>
    <!-- 保存图片按钮 -->
    <view class="flex justify-center mt-8">
      <button type="primary" @tap="saveQrcode"
              class="bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-300">保存到图库</button>
    </view>
    <!-- 长按保存提示 -->
    <!--    <text class="text-center text-gray-600 mt-4">长按二维码可保存到本地</text>-->
  </view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'

export default {
  data() {
    return {
      ifShow: true,
      val: '二维码', // 要生成的二维码值
      size: 400, // 二维码大小
      unit: 'upx', // 单位
      background: '#b4e9e2', // 背景色
      foreground: '#309286', // 前景色
      pdground: '#32dbc6', // 角标色
      icon: '', // 二维码图标
      iconsize: 40, // 二维码图标大小
      lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
      onval: false, // val值变化时自动重新生成二维码
      loadMake: true, // 组件加载完成后自动生成二维码
      src: '' // 二维码生成后的图片地址或base64
    }
  },
  methods: {
    sliderchange(e) {
      this.size = e.detail.value
    },
    creatQrcode() {
      this.$refs.qrcode._makeCode()
    },
    saveQrcode() {
      this.$refs.qrcode._saveCode()
    },
    qrR(res) {
      this.src = res
    },
    clearQrcode() {
      this.$refs.qrcode._clearCode()
      this.val = ''
    },
    ifQrcode() {
      this.ifShow = !this.ifShow
    },
    selectIcon() {
      let that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          that.icon = res.tempFilePaths[0]
          setTimeout(() => {
            that.creatQrcode()
          }, 100);
          // console.log(res.tempFilePaths);
        }
      });
    }
  },
  components: {
    tkiQrcode
  },
  onLoad() { },
}
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #ffe4e1;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.mb-8 {
  margin-bottom: 20px;
}

.rounded-full {
  border-radius: 50%;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.avatar-image {
  width: 80px;
  height: 80px;
}

.name-text {
  line-height: 1.2;
}

.text-gray-600 {
  color: #666;
}

.text-xs {
  font-size: 12px;
}

.text-center {
  text-align: center;
}

.justify-center {
  justify-content: center;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-10 {
  top: 25px; /* 调整为合适的距离，这里设置为 25px */
}

.w-full {
  width: 100%;
}

.mt-8 {
  margin-top: 20px;
}

.bg-red-500 {
  background-color: #ff4500;
}

.text-white {
  color: white;
}

.py-2 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.px-4 {
  padding-left: 10px;
  padding-right: 10px;
}

.rounded-md {
  border-radius: 5px;
}

.hover:bg-red-600:hover {
  background-color: #b22222;
}

.focus:outline-none:focus {
  outline: none;
}

.focus:ring:focus {
  box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.5);
}

.focus:ring-red-300:focus {
  --tw-ring-color: #ff6347;
}

.text-orange-500 {
  color: #f97316;
}
</style>